<template>
  <div class="chartNum">
    <div class="ttlMoney">年度总营业额</div>
    <div class="box-item">
      <li v-for="(item, index) in orderNum" :key="index"
        :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }">
        <span v-if="!isNaN(item)">
          <i ref="numberItem">0123456789</i>
        </span>
        <span v-else class="comma">{{ item }}</span>
      </li>
    </div>
    <div class="floatBox1">
      今日营业额<span>{{
        centerData.todayRevenue | spliceTofiexd | spliceString
      }}￥</span>
    </div>
    <div class="floatBox2">
      今日{{ $tokenName
      }}<span>1{{ $tokenName }}={{ centerData.nowToken
}}<span style="font-size: 0.0625rem; margin: 0">￥</span></span>
    </div>
    <div class="floatBox3">
      昨日营业额<span>{{
        centerData.pastRevenue | spliceTofiexd | spliceString
      }}￥</span>
    </div>
    <div class="floatBox4">
      昨日{{ $tokenName
      }}<span>1{{ $tokenName }}={{ centerData.pastToken
}}<span style="font-size: 0.0625rem; margin: 0">￥</span></span>
    </div>
    <div class="btmOrderBox">
      <div class="btmOrderBox1 backgroundimg">
        <div class="topOrder">
          {{ centerData.annualOrder | spliceTofiexd | spliceString }}
        </div>
        <div class="topOrder1">年度总订单</div>
      </div>
      <div class="btmOrderBox2 backgroundimg">
        <div class="topOrder">
          {{ centerData.annualToken | spliceTofiexd | spliceString }}
        </div>
        <div class="topOrder1">年度总{{ $tokenName }}</div>
      </div>
    </div>
    <!-- <div class="btmTltTxt">2023.12 公司本部</div> -->
  </div>
</template>
<script>
export default {
  name: "CenterChart",
  filters: {
    spliceString(str) {
      return str.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    },
    spliceTofiexd(num) {
      return Math.floor(Number(num))
    },
  },
  props: {
    timeNow: {
      type: String,
      default: "2023.10",
    },
    // 显示的数字
    number: {
      type: Number,
      default: 23338,
    },
    // 显示的长度
    length: {
      type: Number,
      default: 10,
    },
    centerData: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      orderNum: ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0"], // 默认总数
    };
  },
  watch: {
    number: {
      handler(val) {
        this.toOrderNum(val);
      },
      deep: true,
    },
  },
  mounted() {
    setTimeout(() => {
      this.toOrderNum(this.number); // 这里输入数字即可调用
    }, 500);
  },
  methods: {
    // // 设置文字滚动
    setNumberTransform() {
      const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
      // eslint-disable-next-line no-restricted-globals
      const numberArr = this.orderNum.filter((item) => !isNaN(item));
      // console.log(numberItems.length, numberArr)
      // 结合CSS 对数字字符进行滚动,显示数量
      for (let index = 0; index < numberItems.length; index += 1) {
        const elem = numberItems[index];
        elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
      }
    },
    // 处理总数字
    toOrderNum(num) {
      const numtext = num.toString();
      if (this.length) {
        if (numtext.length < this.length) {
          const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位
          this.toOrderNum(numlist); // 递归添加"0"补位
        } else if (numtext.length === num.length) {
          this.orderNum = numtext.split(""); // 将其便变成数据，渲染至滚动数组
        }
      } else {
        this.orderNum = numtext.split("");
      }
      this.$nextTick(() => {
        this.setNumberTransform();
      });
      // this.setNumberTransform()
    },
  },
};
</script>
<style scoped lang="scss">
.chartNum {
  width: 100%;

  /* // position: relative; */
  .ttlMoney {
    width: 100%;
    text-align: center;
    padding-left: 0.2083rem;
    font-size: 0.1667rem;
    margin-bottom: 0.1563rem;
    font-weight: bold;
    color: #ffffff;
    text-shadow: 2px 3px 1px #049fec;
  }

  .floatBox1 {
    text-align: center;
    /* // margin: 0 auto; */
    line-height: 0.2969rem;
    width: 1.0729rem;
    height: 0.2969rem;
    font-size: 0.0625rem;
    margin-bottom: 0.3958rem;
    color: #ffffff;

    span {
      font-size: 0.0833rem;
      margin-left: 0.0313rem;
    }
  }

  .floatBox2 {
    text-align: center;
    line-height: 0.2969rem;
    margin-bottom: 0.3958rem;
    width: 1.0729rem;
    height: 0.2969rem;
    font-size: 0.0625rem;
    color: #ffffff;
    margin-left: 3.4635rem;

    span {
      font-size: 0.0833rem;
      margin-left: 0.0156rem;
    }
  }

  .floatBox3 {
    text-align: center;
    line-height: 0.2969rem;
    margin-bottom: 0.3021rem;
    width: 1.0729rem;
    height: 0.2969rem;
    font-size: 0.0625rem;
    color: #ffffff;
    margin-left: 0.2656rem;

    span {
      font-size: 0.0833rem;
      margin-left: 0.0156rem;
    }
  }

  .floatBox4 {
    text-align: center;
    line-height: 0.2969rem;
    margin-bottom: 0.3021rem;
    width: 1.0938rem;
    height: 0.2969rem;
    font-size: 0.0625rem;
    color: #ffffff;
    margin-left: 2.651rem;

    span {
      font-size: 0.0833rem;
      margin-left: 0.0156rem;
    }
  }

  .btmOrderBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1823rem;

    .btmOrderBox1 {
      padding-top: 0.5677rem;
      width: 0.8453rem;
      font-weight: 600;
      text-align: center;
      height: 1.0201rem;
      margin-left: 0.2813rem;
      background-image: url("../../assets/img/btmOrderBox1.png");

      .topOrder {
        font-size: 0.1042rem;
        line-height: 0.1771rem;
        background: linear-gradient(180deg, #ffffff 61%, #0ac5ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .topOrder1 {
        font-size: 0.0625rem;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        color: #ffffff;
      }
    }

    .btmOrderBox2 {
      padding-top: 0.5677rem;
      font-weight: 600;
      /* // padding-left: .1198rem; */
      text-align: center;
      width: 0.8453rem;
      height: 1.0201rem;
      margin-right: 0.1563rem;
      background-image: url("../../assets/img/btmOrderBox1.png");

      .topOrder {
        font-size: 0.1042rem;
        /* // font-family: D-DIN Exp, D-DIN Exp; */
        line-height: 0.1771rem;
        background: linear-gradient(180deg, #ffffff 61%, #0ac5ff 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .topOrder1 {
        font-size: 0.0625rem;
        font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
        color: #ffffff;
        /* // line-height: 19px; */
      }
    }
  }

  .btmTltTxt {
    width: 100%;
    text-align: center;
    font-size: 0.125rem;
    font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
    font-weight: 600;
    color: #ffffff;
    /* // line-height: 28px; */
  }
}

/*总量滚动数字设置*/
.box-item {
  position: relative;
  /* // height: 34px; */
  left: 0.625rem;
  margin-bottom: 0.5208rem;
  text-align: center;
  list-style: none;
  writing-mode: vertical-lr;
  text-orientation: upright;
}

/*滚动数字设置*/
.number-item {
  width: 0.2865rem;
  height: 0.3542rem;
  margin-right: 0.0521rem;
  /* 背景图片 */
  background: url("~@/assets/img/counBgc.png") no-repeat center center;
  background-size: 100% 100%;
  list-style: none;

  &>span {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 0.3333rem;
    font-family: DS-Digital, DS-Digital;
    font-weight: bold;
    color: #ffffff;
    writing-mode: vertical-rl;
    text-orientation: upright;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;

    &>i {
      font-style: normal;
      position: absolute;
      top: 0.0104rem;
      left: 50%;
      transform: translate(-50%, 0);
      transition: transform 1s ease-in-out;
      letter-spacing: 0.0521rem;
    }
  }
}

.number-item:last-child {
  margin-right: 0;
}

.backgroundimg {
  /* 背景图垂直、水平均居中 */
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  /* // background-attachment: fixed; */
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
}</style>
